<template>
  <div class="playerDetail-container">
    <!-- :style="{'background':'url('+albumPic+')'}" -->

    <div class="content">
      <van-nav-bar>
        <div slot="left" class="left">
          <i class="iconfont  icon-zuojiantou" @click="back"></i>
          <div class="songInfo">
            <div class="songName">{{ audio.name }}</div>
            <div class="singer">{{ audio.singer }}</div>
          </div>
        </div>
        <div slot="right" class="right">
          <van-icon name="share-o" @click="showShare = true"></van-icon>
        </div>
      </van-nav-bar>
      <div class="cd-holder" :class="{ 'cd-play': playing }">
        <div class="sticky"></div>
        <div class="cd-mask" :class="{ 'cd-rotate': playing }">
          <div class="cd-wrapper"></div>
          <img class="cd-img" :src="audio.albumPic" />
        </div>
      </div>
      <div class="lyric-holder">
        <div
          class="lyric-inner"
          style="transition: transform 0.3s ease-out;
  transform-origin: 0px 0px 0px;"
          :style="{ transform: 'translateY(' + lrcOffset + 'px)' }"
        >
          <p
            v-for="(item, index) in afterLrc"
            :id="'line-' + index"
            :key="index"
          >
            {{ item.txt }}
          </p>
        </div>
      </div>
      <div class="process-bar">
        <div class="pro-wrap">
          <div class="currentTime">{{ currentTime | time }}</div>
          <van-slider
            v-model="prCurrentTime"
            @change="onChange"
            button-size="16px"
            active-color="red"
          />
          <div class="durationTime">{{ durationTime | time }}</div>
        </div>
      </div>
      <div class="controls">
        <van-button class="replay" @click="replay"></van-button>
        <van-button class="prePlay" @click="prePlay"></van-button>
        <van-button
          class="togglePlay"
          :class="{ pause: playing }"
          @click="togglePlay"
        ></van-button>
        <van-button class="nextPlay" @click="nextPlay"></van-button>
        <van-button class="openList" @click="showList"></van-button>
      </div>
    </div>

    <div class="mask">
      <div
        class="maskdown"
        :style="{ 'background-image': 'url(' + audio.albumPic + ')' }"
      ></div>
      <div class="maskup"></div>
    </div>

    <!-- 分享页面 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 播放列表弹出层 -->
    <!-- <playList :isListOpen="listVisible" @close="listVisible = false"></playList> -->
    <van-popup
      v-model="isListOpen"
      position="bottom"
      :style="{ height: '30%' }"
      @close="isListOpen = false"
      closeable
    >
      <van-cell class="title">
        <div slot="title">播放列表（{{ songList.length }}）</div>
      </van-cell>
      <!-- 播放列表 -->
      <!-- <van-cell-group>
        <van-cell
          :title="item.name + '-' + item.singer"
          v-for="(item, index) in songList"
          :key="index"
          class="songList"
          :class="{ on: item.id === audio.id }"
        >
          <div slot="titile" class="on">
            <span>{{ item.name }}</span>
            <span>&nbsp;-{{ item.singer }}</span>
          </div>
          <van-icon slot="default" name="cross"></van-icon>
        </van-cell>
      </van-cell-group> -->
      <div class="songInfo">
        <div v-for="(item, index) in songList" :key="index" class="info">
          <div
            class="left"
            :class="{ on: item.id === audio.id }"
            @click="playAudio(item)"
          >
            <span>{{ item.name }}</span>
            <span>&nbsp;-{{ item.singer }}</span>
          </div>
          <van-icon name="cross"></van-icon>
        </div>
      </div>
    </van-popup>
    <!-- 播放列表弹出层 -->
  </div>
</template>

<script>
import api from '../../api/index'
import { mapGetters } from 'vuex'
// import { set } from 'vue/types/umd'
export default {
  name: 'PlayerDetail',
  components: {},
  beforeRouteEnter: (to, from, next) => {
    // 这里判断是否重复打开的同一个歌曲页面
    next(vm => {
      if (parseInt(to.params.id) !== parseInt(vm.audio.id) || vm.lyric === '') {
        vm.loadLrc(vm.audio.id)
      }
    })
  },
  props: {},
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      afterLrc: [],
      lrcIndex: 0,
      lyric: '',
      isListOpen: false
    }
  },
  computed: {
    ...mapGetters([
      'audio',
      'playing',
      'currentTime',
      'durationTime',
      'bufferedTime',
      'songList',
      'currentIndex'
    ]),
    lrcOffset() {
      if (this.afterLrc) {
        const current = Math.round(this.currentTime)
        this.afterLrc.forEach((item, index) => {
          if (item.time === current) this.lrcIndex = index
        })
      }
      return -this.lrcIndex * 58
    },
    prCurrentTime: {
      get: function() {
        return this.$store.getters.prCurrentTime
      },
      set: function(newVal) {}
    }
    // lrcOffset() {
    //   if (this.afterLrc) {
    //     // 1、根据时间获得歌词
    //     var current = Math.round(this.currentTime)
    //     // 2、根据时间得到歌词
    //     for (var i = 0; i < this.afterLrc.length; i++) {
    //       if (this.afterLrc[i].time === current) this.lrcIndex = i
    //     }
    //     return -this.lrcIndex * 58
    //   }
    // }
  },
  watch: {
    audio(val) {
      // console.log(val)
      this.loadLrc(val.id)
    }
  },
  created() {},
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1)
      this.$store.commit('toggleDetail')
    },
    onSelect(option) {
      this.$toast(option.name)
      this.showShare = false
    },
    getLrc() {
      if (this.lyric) {
        const lyrics = this.lyric.split('\n')
        const lrcObj = []
        const timeReg = /\[\d*:\d*((\.|:)\d*)*\]/g
        for (var i = 0; i < lyrics.length; i++) {
          const timeRegArr = lyrics[i].match(timeReg)
          if (!timeRegArr) continue
          const txt = lyrics[i].replace(timeReg, '')
          // const min = Number(String(timeRegArr.match(/\[\d*/i)))
          // console.log(min)
          // 处理时间
          for (var k = 0; k < timeRegArr.length; k++) {
            const array = {}
            const t = timeRegArr[k]
            var min = Number(String(t.match(/\[\d*/i)).slice(1))
            // console.log(t.match(/:\d*/i))
            var sec = Number(String(t.match(/:\d*/i)).slice(1))
            // console.log(min, sec)
            const time = min * 60 + sec
            array.time = time
            array.txt = txt
            lrcObj.push(array)
          }
        }
        this.afterLrc = lrcObj
      }
    },
    // 获取当前歌曲的歌词
    loadLrc(id) {
      this.afterLrc = [{ txt: '正在加载中...' }]
      if (!id) {
        this.afterLrc = [{ txt: '这里显示歌词哦！' }]
        return
      }
      try {
        this.$http.get(api.getLrc(id)).then(data => {
          // 1、先判断是否有歌词
          if (!data.lrc.lyric) {
            this.afterLrc = [{ txt: '(⊙０⊙) 暂无歌词' }]
          } else {
            this.lyric = data.lrc.lyric
            this.getLrc()
          }
        })
      } catch (err) {
        console.log(err)
        this.afterLrc = [{ txt: '(⊙０⊙) 暂无歌词' }]
      }
    },
    onChange(val) {
      console.log(val)
      const time = (val * this.durationTime) / 100
      this.$store.commit('changeTime', time)
      this.$store.commit('setChange', true)
    },
    // 切换暂停播放
    togglePlay() {
      if (this.playing) {
        document.getElementById('audioPlay').pause()
        this.$store.commit('pause')
      } else {
        document.getElementById('audioPlay').play()
        this.$store.commit('play')
      }
    },
    // 播放上一首
    prePlay() {
      if (this.currentIndex === 1) {
        if (this.songList.length === 1) {
          return false
        } else {
          const id = this.songList[this.songList.length - 1].id
          console.log(id)
          this.$store.commit('setPreAudioIndex')
          this.$store.dispatch('getSong', id)
        }
        // return false
      } else {
        const id = this.songList[this.currentIndex - 2].id
        if (!this.songList[this.currentIndex - 2].url) {
          this.$store.commit('setPreAudioIndex')
          this.$store.dispatch('getSong', id)
        } else {
          this.$store.commit('playPreAudio')
        }
      }
    },
    replay() {
      console.log(11)
      this.$store.commit('changeTime', 0)
      this.$store.commit('setChange', true)
    },
    nextPlay() {
      this.$emit('clickBro')
    },
    showList() {
      this.isListOpen = true
    }
  },
  filters: {
    time(value) {
      const time = Math.floor(parseInt(value))
      let minute = Math.floor(time / 60)
      if (minute < 10) {
        minute = '0' + minute
      }
      let sescond = time % 60
      if (sescond < 10) {
        sescond = '0' + sescond
      }
      return minute + ':' + sescond
    }
  }
}
</script>
<style lang="less" scoped>
.playerDetail-container {
  height: 100vh;
  .content {
    z-index: 2;
    position: relative;
    .van-nav-bar {
      display: flex;
      align-items: center;
      height: 112px;
      // opacity: 0;
      background-color: transparent !important;
      .left {
        display: flex;
        align-items: center;
        i.icon-zuojiantou {
          font-size: 50px;
          color: white;
          margin-right: 30px;
        }
        .songInfo {
          float: left;
          .songName {
            text-align: left;
            color: #fff;
            font-size: 32px;
            line-height: 38px;
            width: 380px;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 40px;
          }
          .singer {
            color: #a8a7a7;
            font-size: 28px;
            float: left;
          }
        }
      }
      .right {
        .van-icon {
          font-size: 50px;
          color: #fff;
        }
      }
    }
    // 音乐正在播放时的样式
    .cd-play {
      .sticky {
        -webkit-transform: rotate(0deg) !important;
        transform: rotate(0deg) !important;
        background-position-y: -20px !important;
      }
    }
    .cd-rotate {
      animation: rotating linear 10s infinite;
    }
    /*cd 旋转动画*/

    @-webkit-keyframes rotating {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
    @keyframes rotating {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .cd-holder {
      position: relative;
      width: 100%;
      height: 632px;
      z-index: 5;
      overflow: hidden;
      .sticky {
        width: 240px;
        height: 280px;
        background: url('../../../static/stick_bg.png') no-repeat;
        position: absolute;
        left: 40%;
        top: -15px;
        z-index: 8;
        background-size: contain;
        background-position: center;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
      }
      .cd-mask {
        position: relative;
        width: 490px;
        height: 490px;
        top: 150px;
        // left: 50%;
        // transform: translateX(-50%);
        // left: 140px;
        margin: 0 auto;
        overflow: hidden;
        z-index: 6;
        border-radius: 50%;
        .cd-wrapper {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          background: url('../../../static/cd_wrapper.png') no-repeat center;
          background-size: cover;
        }
        .cd-img {
          width: 90%;
          height: 90%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          border-radius: 50%;
        }
      }
    }
  }

  .mask,
  .maskdown,
  .maskup,
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    top: 0;
    bottom: 0;
  }
  .mask {
    z-index: 1;
  }
  .maskdown {
    z-index: 2;
    filter: blur(60px);
    background-size: cover;
    background-position: center;
  }
  .maskup {
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .lyric-holder {
    position: relative;
    margin-top: 40px;
    height: 90px;
    // background-color: red;
    overflow: hidden;
    .lyric-inner {
      position: absolute;
      left: 20px;
      right: 20px;
      overflow: hidden;
      p {
        overflow: hidden;
        height: 84px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 32px;
        color: #fff;
      }
    }
  }
  .process-bar {
    position: relative;
    margin-top: 100px;
    .pro-wrap {
      position: absolute;
      left: 60px;
      right: 60px;
      // background-color: red;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-slider {
        width: 70%;
      }
      .currentTime,
      .durationTime {
        font-size: 24px;
        color: #fff;
        opacity: 0.5;
      }
    }
  }
  .controls {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 140px;
    padding: 0 40px;
    /deep/ .van-button {
      width: 130px;
      height: 130px;
      background-size: cover !important;
      border: none;
    }
    .replay {
      background: url('../../../static/seq.png') no-repeat center;
      // background-size: cover !important;
    }
    .prePlay {
      background: url('../../../static/prev.png') no-repeat center;
    }
    .togglePlay {
      background: url('../../../static/play.png') no-repeat center;
    }
    .pause {
      background: url('../../../static/pause.png') no-repeat center;
    }
    .nextPlay {
      background: url('../../../static/next.png') no-repeat center;
    }
    .openList {
      background: url('../../../static/list.png') no-repeat center;
    }
  }
  /deep/ .van-popup {
    i.van-popup__close-icon {
      position: fixed !important;
      top: 870px;
      z-index: 999;
    }
    .van-cell {
      position: fixed;
      width: 100%;
      height: 94px;
      top: 850px;
      left: 0;
    }
    .songInfo {
      height: 400px;
      overflow-y: auto;
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px 0 20px;
      height: 92px;
      border-bottom: 2px solid #eee;
      .left {
        width: 90%;
      }
      .left span:nth-child(1) {
        font-size: 28px;
        // color: #000;
      }
      span:nth-child(2) {
        font-size: 24px;
        // color: #737171;
      }
      .van-icon {
        font-size: 20px;
      }
    }
    .on {
      color: red !important;
    }
  }
}
</style>
